<template>
  <div id="container">
      <div id="viewDiv"></div>
      <div id="tool_panel" :style="{backgroundColor:store.state.theme==='dark'?'rgb(30,30,30)':'rgb(240,240,240)'}">
          <div style="margin:8px;display:flex;flex-direction:row; justify-content: center;">
              <el-text size="large"  tag="b">常用组件双向绑定案例</el-text>
          </div>
          <el-tabs style="width:100%;height:auto;" type="border-card"  v-model="model.tabsValue">
              
              <el-tab-pane name="input" >
                  <template #label>INPUT组件</template>
                  <el-space direction="vertical" alignment="flex-start">
                      <el-space>
                          <el-input style="width:300px" v-model="model.input_input"></el-input>
                          <el-button @click="model.input_input='手动修改了文本值'" type="primary" plain>
                              手动更改文本值</el-button>
                      </el-space>
                      <el-text style="width:300px;color:gray" :line-clamp="1" size="large">{{model.input_input}}</el-text>
                  </el-space>
              </el-tab-pane>
              
              <el-tab-pane name="select" label="SELELT组件" >
                  <el-space direction="vertical"  :size="15" alignment="">
                      <el-space alignment="flex-top">
                          <el-select v-model="model.select_select" style="width:200px;">
                              <el-option value="山东省"></el-option>
                              <el-option value="广东省"></el-option>
                              <el-option value="甘肃省"></el-option>
                              <el-option value="吉林省"></el-option>
                          </el-select>
                          <el-text style="width:200px;color:gray" line-clamp="3" size="large">
                              选择了:{{model.select_select}}</el-text>
                      </el-space>
                      <el-space><!--如果没有这个space则按钮会强制100%宽度-->
                          <el-button :style="{width:'200px'}" @click="model.select_select='甘肃省'" type="primary" plain>
                              手动选择某一项</el-button>
                      </el-space>
                  </el-space>
              </el-tab-pane>

              <el-tab-pane name="radio" label="RADIO组件">
                  <el-space direction="vertical"  :size="15" alignment="">
                      <el-space alignment="flex-top">
                          <el-radio-group v-model="model.radio_radio" >
                              <el-radio-button value="山东省" label="山东省"></el-radio-button>
                              <el-radio-button value="广东省" label="广东省"></el-radio-button>
                              <el-radio-button value="甘肃省" label="甘肃省"></el-radio-button>
                              <el-radio-button value="吉林省" label="吉林省"></el-radio-button>
                          </el-radio-group>
                          <el-text style="color:gray"  size="large">选择了:{{model.radio_radio}}</el-text>
                      </el-space>
                      <el-space><!--如果没有这个space则按钮会强制100%宽度-->
                          <el-button :style="{width:'200px'}" @click="model.radio_radio='山东省'" 
                          type="primary" plain>手动选择某一项</el-button>
                      </el-space>
                  </el-space>
              </el-tab-pane>
              
              <el-tab-pane name="checkbox" label="CHECKBOX组件">
                  <el-space direction="vertical"  :size="15" alignment="">
                      <el-space alignment="flex-top">
                          <el-checkbox-group v-model="model.checkbox_checkbox" >
                              <el-checkbox-button value="山东省" label="山东省"></el-checkbox-button>
                              <el-checkbox-button value="广东省" label="广东省"></el-checkbox-button>
                              <el-checkbox-button value="甘肃省" label="甘肃省"></el-checkbox-button>
                              <el-checkbox-button value="吉林省" label="吉林省"></el-checkbox-button>
                          </el-checkbox-group>
                      </el-space>
                      <el-text style="color:gray"  size="large">选择了:{{model.checkbox_checkbox}}</el-text>
                      <el-space><!--如果没有这个space则按钮会强制100%宽度-->
                          <el-button :style="{width:'200px'}" @click="model.checkbox_checkbox=['吉林省','广东省']"
                           type="primary" plain>手动选择某些项</el-button>
                      </el-space>
                  </el-space>
              </el-tab-pane>
          </el-tabs>
      </div>
  </div>
</template>

<script setup>
import {深色底图,灰色底图} from '../底图库'
import {onMounted,ref,reactive} from 'vue'
import Map from "@arcgis/core/Map.js"
import MapView from '@arcgis/core/views/MapView'
import { useStore } from 'vuex'
const store=useStore()//加载store对象
const model=reactive({//reactive方法创建响应式变量的优点之一就是一个把一系列变量集中到一个对象中方便管理
  tabsValue:"input",
  input_input:"在这里随意输入文字",
  select_select:"山东省",
  radio_radio :"山东省",
  checkbox_checkbox:["广东省"]
})
var map,view
onMounted(()=>{
  map=new Map({
      basemap:{
          baseLayers:[]
      }
  })
  switch(store.state.theme){
      case "dark":
          map.basemap.baseLayers.add(深色底图) 
          break
      case "light":
          map.basemap.baseLayers.add(灰色底图)
          break
  }
  view=new MapView({
      map:map, container:"viewDiv", zoom:2, 
      constraints:{
          rotationEnabled:false,
          maxScale:1300
      }
  })
  view.ui.remove(["zoom","attribution"])
})
</script>

<style scoped>
  #viewDiv,#container{
      height:100%;width:100%;padding:0;margin:0;
  }
  #tool_panel{
      position:absolute;top:15px;  left:15px;
      box-shadow:0 0 5px gray;
      border-radius:2px;
  }</style>
